<script setup>
import { useI18n } from 'vue-i18n';

const props = defineProps({
  open: { type: Boolean, default: false },
});
const emit = defineEmits(['close', 'update:open']);
const { t } = useI18n();
</script>

<template>
  <div v-if="open" class="fixed inset-0 z-40">
    <div class="absolute inset-0 bg-black/40" @click="$emit('close')"></div>
    <div class="absolute left-1/2 top-[10vh] w-[min(900px,94vw)] h-[min(650px,80vh)] -translate-x-1/2 rounded-xl border bg-panel-bg shadow-2xl border-panel-border text-panel-fg overflow-hidden">
      <div class="h-full flex flex-col">
        <div class="flex items-center justify-between border-b border-panel-border px-4 py-3">
          <div class="text-sm font-medium">{{ t('app.settings_title') }}</div>
          <button class="px-2 py-1 text-xs rounded-md border bg-panel-bg hover:bg-subtle-bg border-panel-border transition-colors" @click="$emit('close')">{{ t('app.close') }}</button>
        </div>
        
        <div class="flex-1 min-h-0">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>


